<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<swiper class="banner-swiper" circular :indicator-dots="false" autoplay :interval="3000" :duration="500"
			@change="onSwiperChange">
			<swiper-item v-for="(item, index) in hotelImages" :key="index">
				<image :src="item" mode="aspectFill" class="banner-image"></image>
			</swiper-item>
			<view class="swiper-indicator">{{ currentSwiperIndex + 1 }}/{{ hotelImages.length }}</view>
			<!-- <view class="score-tag">{{ hotelDetail.score }}分</view> -->
		</swiper>

		<!-- 酒店信息头部 -->
		<view class="hotel-info-card">
			<view class="hotel-name">{{ hotelDetail.title }}</view>
			<!-- <view class="hotel-tags">
				<text class="tag">{{ hotelDetail.openYear }}年开业</text>
				<text class="tag">{{ hotelDetail.renovateYear }}年装修</text>
			</view> -->
			<view class="hotel-address">
				<uni-icons type="location" size="16" color="#666"></uni-icons>
				<text class="address-text">{{ hotelDetail.address }}</text>
				<view class="address-actions">
					<view class="action-item" @click="openMap">
						<uni-icons type="map" size="16" color="#666"></uni-icons>
						<text>地图</text>
					</view>
					<view class="action-item" @click="makeCall">
						<uni-icons type="phone" size="16" color="#666"></uni-icons>
						<text>电话</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 预订选择区 -->
		<!-- <view class="booking-card">
			<view class="room-type-tabs">
				<view class="tab-item" :class="{ active: activeTab === 'fullDay' }" @click="switchTab('fullDay')">全天房
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'hourly' }" @click="switchTab('hourly')">特价房
				</view>
			</view>
		</view> -->
		<view class="booking-card">
			<!-- <view class="booking-header">
				<text class="booking-title">预订</text>
				<text class="room-count">1间可订</text>
			</view> -->

			<!-- 替换原有日期选择器为新组件 -->
			<view class="date-picker-container" @click="showCalendar=!showCalendar">
				<view class="date-info">
					<view class="check-in">
						<!-- <text class="date-label">入住</text> -->
						<text class="date-value">{{ formatDate(checkInDate) }}</text>
					</view>
					<view class="stay-nights">{{ nightNum }}晚</view>
					<view class="check-out">
						<!-- <text class="date-label">离店</text> -->
						<text class="date-value">{{ formatDate(checkOutDate) }}</text>
					</view>
				</view>
				<uni-icons type="calendar" size="20" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 房型列表 -->
		<view class="room-list">
			<view class="room-card" v-for="(room, index) in roomList" :key="index">
				<view class="room-info">
					<image :src="room.cover" mode="aspectFill" class="room-image"></image>
					<view class="room-detail">
						<view class="room-header">
							<text class="room-name">{{ room.name }}</text>
							<view class="price-info">
								<text class="current-price">¥<text class="price-value">{{ room.price }}</text>起</text>
								<text class="original-price">¥{{ room.origin_price }}</text>
							</view>
						</view>
						<!-- <text class="room-desc">{{ room.description }}</text> -->
						<view class="room-bottom">
							<view class="room-tags">
								<!-- <text class="room-tag" v-for="(tag, tagIndex) in room.tags"
									:key="tagIndex">{{ tag }}</text> -->
							</view>
							<button class="book-btn" @click="bookRoom(room)">预订</button>
						</view>
					</view>
				</view>
				<view class="room-expand" @click="toggleRoomDetail(index)">
					<text>{{ room.expanded ? '收起' : '展开' }}</text>
					<uni-icons :type="room.expanded ? 'top' : 'bottom'" size="14" color="#666"></uni-icons>
				</view>
				<view class="room-detail-content" v-if="room.expanded">
					<view class="detail-item" v-for="(item, itemIndex) in room.config" :key="itemIndex">
						<text class="detail-label">{{ item.label }}</text>
						<text class="detail-value">{{ item.value }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 设施服务区 -->
		<view class="facilities-card">
			<view class="section-title">设施服务</view>
			<view class="facilities-grid">
				<view class="facility-item" v-for="(facility, index) in hotelDetail.basicList" :key="index">
					<!-- <uni-icons :type="facility.icon" size="24" color="#666"></uni-icons> -->
					<text class="facility-name">{{ facility.title }}</text>
				</view>
			</view>
			<view class="more-facilities" @click="showAllFacilities">
				<text>查看全部</text>
				<uni-icons type="right" size="14" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 酒店介绍区 -->
		<view class="hotel-intro-card">
			<view class="section-title">酒店介绍</view>
			<view class="contact-info">
				<text class="contact-label">联系电话：</text>
				<text class="contact-value">{{ hotelDetail.phone }}</text>
			</view>
			<view class="intro-content" :class="{ 'intro-collapsed': introCollapsed }">
				{{ hotelDetail.introduction }}
			</view>
			<view class="intro-toggle" @click="toggleIntro">
				<text>{{ introCollapsed ? '展开' : '收起' }}</text>
				<uni-icons :type="introCollapsed ? 'bottom' : 'top'" size="14" color="#666"></uni-icons>
			</view>
		</view>
		<u-popup :show="showCalendar" mode="bottom" :round="15" @close="showCalendar=false">
			<view class="" style="padding-bottom: 120rpx;padding-top: 30rpx;">
				<!-- <multi-platform-calendar :type="0"></multi-platform-calendar> -->
				<hotelDatePicker :type="mouthType" @confirm="handleDateConfirm"></hotelDatePicker>
			</view>
		</u-popup>
		<!-- <u-calendar :show="showCalendar" :mouthType="mouthType" mode="range" @close="showCalendar = false"
			@confirm="handleDateConfirm"></u-calendar> -->
		<!-- 日期选择弹窗 -->
		<!-- <uni-popup ref="datePickerPopup" type="bottom">
			<date-picker 
				:isSpecialRoom="false" 
				:initialCheckInDate="checkInDate" 
				:initialCheckOutDate="checkOutDate"
				@confirm="onDateConfirm"
			/>
		</uni-popup> -->
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
	} from "@dcloudio/uni-app";
	import { ref, computed, onMounted, toRaw } from 'vue';
	import { getHotelDetailApi, getRoomPrice, oaLogin, jsConfig, boolonOrderCheck, deposit_orderCreate, payDeposit } from '@/utils/apiPost.js'
	import { calculateNights, isOneMonthLaterDate } from "@/utils/time.js"
	import { getToken, setToken } from "../../utils/token";
	import wx from 'weixin-js-sdk';
	import WechatSDK from '@/utils/wechat_sdk.js';
	import hotelDatePicker from "@/components/hotel-date-picker/hotel-date-picker.vue"
	const hotelId = ref<number>();
	const nightNum = ref<number>(1)
	onLoad((option) => {
		console.log("onload", option);
		// let data1 = JSON.parse(option.data)
		hotelId.value = option.id
		checkInDate.value = option.checkInDate
		checkOutDate.value = option.checkGoDate
		mouthType.value = option.mouthType
		nightNum.value = calculateNights(option.checkInDate, option.checkGoDate)
		console.log(checkInDate.value, checkOutDate.value);
	})
	// import DatePicker from '@/components/date-picker/date-picker.vue';
	
	// 轮播图相关
	const currentSwiperIndex = ref(0);
	const onSwiperChange = (e : any) => {
		currentSwiperIndex.value = e.detail.current;
	};
	
	const hotelImages = ref<string[]>([])
	hotelImages.value = [
		'https://public.readdy.ai/ai/img_res/4fc142054abd14860465774aa1d719a9.jpg',
		'https://public.readdy.ai/ai/img_res/89fd31927854196167b95c2043cf4547.jpg',
		'https://public.readdy.ai/ai/img_res/1ef29ed3acbe88f0679773e3e55122bc.jpg',
		'https://public.readdy.ai/ai/img_res/4fc142054abd14860465774aa1d719a9.jpg',
		'https://public.readdy.ai/ai/img_res/89fd31927854196167b95c2043cf4547.jpg'
	];
	interface basicListItem {
		id: number,
		title: string
	}
	
	interface hotelDetailObj {
		address: string,
		basicList?: {
			id: number,
			title: string
		}[], 
		city?: number,
		cover?: string,
		ctime?: number,
		desc?: string,
		district?: number,
		end_time?: number,
		id: number,
		latitude?: string,
		longitude?: string,
		origin_price?: number,
		phone?: string,
		photos?: string[],
		price?: number,
		province?: number,
		status?: number,
		title: string,
		utime?: number
	}
	// 酒店详情数据
	const hotelDetail = ref<hotelDetailObj>();
	hotelDetail.value = {
		id: 1,
		title: '庭酒店(杭州阿里店)',
		address: '杭州市余杭区文一西路969号',
		phone: '0571-88888888',
	}

	// 日期选择相关
	const today = new Date();
	const checkInDate = ref(today.toISOString().split('T')[0]);
	const tomorrow = new Date(today);
	tomorrow.setDate(tomorrow.getDate() + 1);
	const checkOutDate = ref(tomorrow.toISOString().split('T')[0]);
	const mouthType = ref(0);
	const showCalendar = ref(false);

	const handleDateConfirm = (e) => {
		console.log(e);
		showCalendar.value = false
		checkInDate.value = e[0]
		checkOutDate.value = e[e.length - 1]
		nightNum.value = calculateNights(e[0], e[e.length - 1])
	}

	// 计算入住天数
	const stayNights = computed(() => {
		const start = new Date(checkInDate.value);
		const end = new Date(checkOutDate.value);
		return Math.round((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
	});

	// 格式化日期
	const formatDate = (dateStr : string) => {
		const date = new Date(dateStr);
		return `${date.getMonth() + 1}月${date.getDate()}日`;
	};

	// 房型类型切换
	const activeTab = ref('fullDay');
	const switchTab = (tab : string) => {
		activeTab.value = tab;
	};

	
	interface roomListItem {
		addtime?: number,
		config?: {
			label: string,
			value: string,
		}[],
		cover?: string,
		desc?: string,
		hotel_id?: number,
		id: number
		name: string,
		number?: number,
		origin_price?: string,
		price?: string,
		status?: number,
		type?: number,
		uptime?: number,
		expanded?: boolean,
	}
	// 房型列表数据
	const roomList = ref<roomListItem[]>([]);

	// roomList.value = [
	// 	{
	// 		id: 1,
	// 		name: '纯享单人间',
	// 		description: '单人床 1.2m | 15㎡ | 有窗',
	// 		cover: 'https://public.readdy.ai/ai/img_res/4fc142054abd14860465774aa1d719a9.jpg',
	// 		price: "245",
	// 		originalPrice: "250",
	// 		tags: ['免费WiFi', '免费取消'],
	// 		expanded: false,
	// 		details: [
	// 			{ label: '床型', value: '单人床 1.2m' },
	// 			{ label: '面积', value: '15㎡' },
	// 			{ label: '楼层', value: '2-5层' },
	// 			{ label: '早餐', value: '无早餐' },
	// 			{ label: '窗户', value: '有窗' }
	// 		]
	// 	},
	// 	{
	// 		id: 2,
	// 		name: '大床房1',
	// 		description: '大床 1.8m | 20㎡ | 有窗',
	// 		image: 'https://public.readdy.ai/ai/img_res/89fd31927854196167b95c2043cf4547.jpg',
	// 		price: "298",
	// 		originalPrice: "328",
	// 		tags: ['免费WiFi', '免费取消', '含早餐'],
	// 		expanded: false,
	// 		details: [
	// 			{ label: '床型', value: '大床 1.8m' },
	// 			{ label: '面积', value: '20㎡' },
	// 			{ label: '楼层', value: '3-8层' },
	// 			{ label: '早餐', value: '含单早' },
	// 			{ label: '窗户', value: '有窗' }
	// 		]
	// 	},
	// 	{
	// 		id: 3,
	// 		name: '豪华双床房',
	// 		description: '双床 1.2m*2 | 25㎡ | 有窗',
	// 		image: 'https://public.readdy.ai/ai/img_res/1ef29ed3acbe88f0679773e3e55122bc.jpg',
	// 		price: "358",
	// 		originalPrice: "398",
	// 		tags: ['免费WiFi', '免费取消', '含双早'],
	// 		expanded: false,
	// 		details: [
	// 			{ label: '床型', value: '双床 1.2m*2' },
	// 			{ label: '面积', value: '25㎡' },
	// 			{ label: '楼层', value: '6-12层' },
	// 			{ label: '早餐', value: '含双早' },
	// 			{ label: '窗户', value: '有窗' }
	// 		]
	// 	}
	// ]
	// 计算最低价格
	const lowestPrice = computed(() => {
		return Math.min(...roomList.value.map(room => room.price));
	});

	// 设施服务数据
	const facilities = [
		{ icon: 'shop', name: '餐厅' },
		{ icon: 'staff', name: '前台服务' },
		{ icon: 'medal', name: '健身房' },
		{ icon: 'gift', name: '商务中心' },
		{ icon: 'calendar', name: '会议室' },
		{ icon: 'vip', name: 'SPA' },
		{ icon: 'notification', name: '叫醒服务' }
	];

	// 酒店介绍展开/收起
	const introCollapsed = ref(true);
	const toggleIntro = () => {
		introCollapsed.value = !introCollapsed.value;
	};

	// 房型详情展开/收起
	const toggleRoomDetail = (index : number) => {
		roomList.value[index].expanded = !roomList.value[index].expanded;
	};

	// 页面交互方法
	const selectDate = () => {
		uni.showToast({ title: '选择日期', icon: 'none' });
	};
	
	const mapInfo = ref({
		lat: '',
		lng: '',
	})
	const openMap = () => {
		// uni.showToast({ title: '查看地图', icon: 'none' });
		// uni.navigateTo({
		// 	url: '/pages/mapPage/index?data='
		// })
		console.log(hotelDetail.value.latitude)
		console.log(hotelDetail.value.longitude)
		console.log(window.location.href)
		jsConfig({url: window.location.href}).then(res=>{
			return new Promise((resolve, reject) => {
			  wx.config({
			    debug: false,
			    appId: res.data.appId,
			    timestamp: res.data.timestamp.toString() || "",
			    nonceStr: res.data.nonceStr || "",
			    signature: res.data.signature || "",
			    jsApiList: res.data.jsApiList
			  });
			
			  wx.ready(() => {
			    resolve(wx);
				console.log('初始化完成', wx)
					const latitude = Number(hotelDetail.value.latitude)
					const longitude = Number(hotelDetail.value.longitude)
					console.log(latitude, longitude)
					wx.openLocation({
						latitude,
						longitude,
						scale: 18,
						name: "",
						address: "",
						infoUrl: ""
					})
				});
			
			  wx.error(err => {
			    reject(err);
			  });
			});
		}).catch(error=>{
			console.log(error)
		})
		
	};

	const makeCall = () => {
		uni.makePhoneCall({
			phoneNumber: hotelDetail.value.phone
		});
	};

	const showAllFacilities = () => {
		uni.showToast({ title: '查看全部设施', icon: 'none' });
	};
	const getQueryVariable = (variable) => {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	const bookRoom = (room : any) => {
		// 跳转到确认订单页
		// if(uni.getStorageSync('user_id')){
		// if(getToken() ){
			// let code = getQueryVariable('code')
			// if (code) {
			// 	console.log(code);
			// 	oaLogin({code}).then(res=>{
			// 		console.log(res)
			// 		if(res.code == 1){
			// 			console.log('1111111111111111111111')
			// 			setToken(res.data.token)
			// 			console.log('token==========================================',getToken())
			// 		}
			// 	}).catch(error=>{
			// 		console.log(error)
			// 	})
			// } else {
			// 	let appid = "wx9117da7c5261e857" //项目appid
			// 	let mainstate = Math.random()
			// 	let url = encodeURIComponent('http://hotel.shengxuankj.com/web/pages/profile/profile') //这里的是回调地址要与申请的地址填写一致
			// 	console.log('url=====================================',url)
			// 	let scopes = "snsapi_userinfo" //表示授权的作用域，多个可以用逗号隔开，snsapi_base表示静默授权，snsapi_userinfo表示非静默授权
			// 	//state：用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击）可设置为简单的随机数加session进行校验
			// 	let httpsUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=${scopes}&state=${mainstate}&connect_redirect=1#wechat_redirect`
			// 	window.location.href = httpsUrl
			// }
		// }
		if(mouthType.value == 1){
			let params = {
				type: mouthType.value,
				day: nightNum.value
			}
			boolonOrderCheck(params).then(res=>{
				console.log('====================',res)
				// if(res.code == 1){
					// get_priceFun()
				// }
				if(res.code == 1){
					if(res.data.check_status == 0){
						uni.showModal({
							title: '提示',
							content: `押金不够，需要支付${res.data.diff_price}元押金`,
							confirmText: '支付',
							success: function (resModal) {
								if (resModal.confirm) {
									console.log('用户点击确定');
									let depositObj = {
										type: mouthType.value,
										day: nightNum.value
									}
									deposit_orderCreate(depositObj).then(depositRes=>{
										console.log(depositRes)
										if(depositRes.code == 1){
											let payObj = {
												order_id: depositRes.data.id
											}
											payDeposit(payObj).then(payRes=>{
												console.log(payRes)
												if(payRes.code == 1){
													uni.showLoading({
														title: '加载中……',
														mask: true
													})
													wx.config({
													  debug: false,
													  appId: payRes.data.appId,
													  timestamp: payRes.data.timeStamp || "",
													  nonceStr: payRes.data.nonceStr || "",
													  signature: payRes.data.paySign || "",
													  jsApiList: [
														'chooseWXPay',         // 微信支付
														'updateAppMessageShareData', // 分享到朋友圈
														'updateTimelineShareData',    // 分享给朋友
														'getLocation', // 获取位置
														'openLocation'
															  // 其他需要调用的API
													  ]
													});
													wx.ready(() => {
														uni.hideLoading()
														wx.chooseWXPay({
														  timestamp: payRes.data.timeStamp,
														  nonceStr: payRes.data.nonceStr,
														  package: payRes.data.package,
														  signType: payRes.data.signType,
														  paySign: payRes.data.paySign,
														  success: (WXPayres) => {
															  console.log('支付成功')
															  uni.showToast({
																title: `支付成功${JSON.stringify(WXPayres)}`,
																duration: 1000
															  })
														  },
														  fail: (WXPayerror) => {
															  uni.showToast({
																title: `支付失败${JSON.stringify(WXPayerror)}`,
																duration: 1000
															  })
														  }
														});
													});
												}
											}).catch(payError=>{
												console.log(payError)
											})
										}
									}).catch(depositError=>{
										console.log(depositError)
									})
								} else if (resModal.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}else{
						uni.navigateTo({
							url: `/pages/order-confirm/order-confirm?roomId=${room.id}&roomName=${room.name}&price=${room.price}&hotelName=${encodeURIComponent(hotelDetail.value.title)}&hotelAddress=${encodeURIComponent(hotelDetail.value.address)}&checkInDate=${checkInDate.value}&checkOutDate=${checkOutDate.value}&mouthType=${mouthType.value}`
						});
					}
				}
			}).catch(error=>{
				console.log(error)
			})
		}else{
			console.log(checkInDate.value, isOneMonthLaterDate(checkInDate.value))
			if(isOneMonthLaterDate(checkInDate.value) == false){
				uni.showToast({
					title: '选定的日期已满房，请重新选择预定日期',
					icon: 'none',
					duration: 2000
				})
				showCalendar.value = true
			}else{
				uni.navigateTo({
					url: `/pages/order-confirm/order-confirm?roomId=${room.id}&roomName=${room.name}&price=${room.price}&hotelName=${encodeURIComponent(hotelDetail.value.title)}&hotelAddress=${encodeURIComponent(hotelDetail.value.address)}&checkInDate=${checkInDate.value}&checkOutDate=${checkOutDate.value}&mouthType=${mouthType.value}`
				});
			}
		}
		
	};

	// 日期选择相关
	const datePickerPopup = ref(null);
	const showDatePicker = () => {
		if (datePickerPopup.value) {
			datePickerPopup.value.open();
		} else {
			console.error('日期选择弹窗未初始化');
		}
	};

	const onDateConfirm = (data) => {
		console.log('选择的日期:', data);
		checkInDate.value = data.checkInDate;
		checkOutDate.value = data.checkOutDate;
		if (datePickerPopup.value) {
			datePickerPopup.value.close();
		}

		// 可以在这里添加刷新房间列表的逻辑
		// loadRoomList();
	};
	
	const getHotelDetail = () => {
		let obj = {
			id: hotelId.value,
			type: mouthType.value
		}
		getHotelDetailApi(obj).then(res=>{
			console.log(res)
			if(res.code == 1){
				hotelDetail.value = res.data.hotelInfo
				hotelImages.value = res.data.hotelInfo.photos
				roomList.value = res.data.roomLIst
				console.log(JSON.stringify(res.data.roomLIst))
				roomList.value.forEach((item, index)=>{
					item.expanded = false
					// item.config.value = 
					item.config = Object.keys(item.config).map(key => ({
						label: key,
						value: item.config[key]
					}));
				})
				console.log(toRaw(roomList.value))
			}
		}).catch((error=>{
			console.log(error)
		}))
	}
	onShow(()=>{
		getHotelDetail()
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 80rpx;
	}

	// 轮播图
	.banner-swiper {
		height: 400rpx;
		position: relative;

		.banner-image {
			width: 100%;
			height: 100%;
		}

		.swiper-indicator {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			z-index: 10;
		}

		.score-tag {
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			background: rgba(255, 75, 75, 0.9);
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			padding: 8rpx 16rpx;
			border-radius: 8rpx;
			z-index: 10;
		}
	}

	// 酒店信息卡片
	.hotel-info-card {
		// margin: 24rpx 24rpx 0;
		margin-top: -20rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		position: relative;
		z-index: 20;
		// box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

		.hotel-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
		}

		.hotel-tags {
			display: flex;
			gap: 16rpx;
			margin-bottom: 24rpx;

			.tag {
				font-size: 24rpx;
				color: #666;
				background: #F5F5F5;
				padding: 4rpx 12rpx;
				border-radius: 4rpx;
			}
		}

		.hotel-address {
			display: flex;
			align-items: center;


			.address-text {
				flex: 1;
				font-size: 28rpx;
				color: #666;
				margin-left: 8rpx;
			}

			.address-actions {
				display: flex;
				gap: 24rpx;

				.action-item {
					display: flex;
					align-items: center;
					gap: 4rpx;

					text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}
	}

	// 预订选择卡片
	.booking-card {
		// margin: 24rpx 24rpx 0;
		border-radius: 16rpx;
		overflow: hidden;

		.booking-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.booking-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}

			.room-count {
				font-size: 24rpx;
				color: #666;
			}
		}

		.date-picker-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;
			width: 94%;
			background: #fff;
			margin: 20rpx 3%;
			margin-bottom: 0;
			border-radius: 10rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.date-info {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.check-in,
				.check-out {
					display: flex;
					flex-direction: column;

					.date-label {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 8rpx;
					}

					.date-value {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
				}

				.stay-nights {
					font-size: 24rpx;
					color: #666;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					// padding: 0 16rpx;
					border: 1rpx solid #666;
					font-size: 16rpx;
					// border-right: 1rpx solid #EEEEEE;
				}
			}
		}

		.room-type-tabs {
			display: flex;
			background: #fff;
			border-bottom: 1rpx solid #EEEEEE;

			.tab-item {
				flex: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
				position: relative;

				&.active {
					color: #FF6B23;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						// background: #FF6B23;
						border-radius: 2rpx;
					}
				}
			}
		}
	}

	// 房型列表
	.room-list {
		margin: 24rpx 24rpx 0rpx;

		.room-card {
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;

			.room-info {
				display: flex;
				margin-bottom: 24rpx;

				.room-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					margin-right: 24rpx;
					flex-shrink: 0;
				}

				.room-detail {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.room-header {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						margin-bottom: 12rpx;

						.room-name {
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
						}

						.price-info {
							text-align: right;

							.current-price {
								font-size: 24rpx;
								color: #FF6B23;

								.price-value {
									font-size: 36rpx;
									font-weight: 600;
								}
							}

							.original-price {
								display: block;
								font-size: 24rpx;
								color: #999;
								text-decoration: line-through;
							}
						}
					}

					.room-desc {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 16rpx;
					}

					.room-bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.room-tags {
							display: flex;
							flex-wrap: wrap;
							gap: 12rpx;

							.room-tag {
								font-size: 22rpx;
								color: #FF6B23;
								background: rgba(255, 107, 35, 0.1);
								padding: 4rpx 12rpx;
								border-radius: 4rpx;
							}
						}

						.book-btn {
							background: #FF6B23;
							color: #fff;
							font-size: 26rpx;
							padding: 0 30rpx;
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 30rpx;
							margin: 0;
						}
					}
				}
			}

			.room-expand {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 24rpx 0 0;
				gap: 8rpx;

				text {
					font-size: 24rpx;
					color: #666;
				}
			}

			.room-detail-content {
				margin-top: 24rpx;
				padding-top: 24rpx;
				border-top: 1rpx solid #EEEEEE;

				.detail-item {
					display: flex;
					margin-bottom: 16rpx;

					.detail-label {
						width: 120rpx;
						font-size: 24rpx;
						color: #999;
					}

					.detail-value {
						flex: 1;
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}
	}

	// 设施服务卡片
	.facilities-card {
		margin: 24rpx 24rpx 0;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 24rpx;
		}

		.facilities-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24rpx;

			.facility-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12rpx;

				.facility-name {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.more-facilities {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			gap: 8rpx;

			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	// 酒店介绍卡片
	.hotel-intro-card {
		margin: 24rpx 24rpx 0;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 24rpx;
		}

		.contact-info {
			margin-bottom: 16rpx;

			.contact-label {
				font-size: 24rpx;
				color: #999;
			}

			.contact-value {
				font-size: 24rpx;
				color: #333;
			}
		}

		.intro-content {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;

			&.intro-collapsed {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}

		.intro-toggle {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			gap: 8rpx;

			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
</style>